<template>
  <div class="theme">
    <div class="theme-content theme-width" ref="themeRef">
      <el-carousel :height="themeHeight" :interval="5000">
        <el-carousel-item v-for="item in ztwz" :key="item.id" style="cursor:pointer;z-index: 999">
          <img :src="item.filePath" style="width: 100%;height: 100%;object-fit: cover;" alt=""
               @click="handleOut(item)"/>
          <!--          {{ item.name }}-->
        </el-carousel-item>
      </el-carousel>

    </div>
  </div>
</template>

<script>
// import './layout.css'

import { getSwebListApi } from "@/api/home";

export default {
  // props: ['ztwzList'],
  data() {
    return {
      ztwz: [],
      themeHeight: ''
    }
  },
  // watch: {
  //   themeHeight(data) {
  //     console.log('data', data)
  //     this.themeHeight = data
  //     // this.getImg(data)
  //   }
  // },
  // computed: {
  //   // 滚动区高度
  //   // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)
  //   themeHeight: function() {
  //     console.log('this.themeHeight', window.innerWidth)
  //     return (window.innerHeight - 46 - 50) + 'px';
  //   }
  // },
  mounted() {
    this.init()
    console.log('this.themeHeight', this.$refs.themeRef.offsetWidth)
    console.log('this.themeHeight', this.$refs.themeRef.offsetWidth)
    this.themeHeight = `${ this.$refs.themeRef.offsetWidth * 0.11 }px`
  },
  methods: {
    async init() {
      this.ztwz = await getSwebListApi()
      // this.$nextTick(() => {
      //   this.themeHeight = `${this.$refs.theme.offsetWidth * 0.11}px`
      // });
    },
    handleOut(item) {
      if (item.href) {
        window.open(item.href);
      }
    }
  }
}
</script>

<style lang="less" scoped>
.theme {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.theme-content {
  background: #237CBE;
}

@media screen and (min-width: 1300px) {
  .theme-width {
    width: 1200px;
  }
}

@media screen and (min-width: 1800px) {
  .theme-width {
    width: 1400px;
  }
}

@media screen and (min-width: 2000px) {
  .theme-width {
    width: 1920px;
  }
}

//@media screen and (max-width: 1920px) {
//  .theme-width {
//    width: 1600px;
//  }
//}

/deep/ .el-carousel__indicators {
  display: none;
}
</style>
